<template>
  <div>
    <!-- 顶部导航 -->
    <header class="home-header wrap" :class="{'active': state.headerScroll}"> 
      <Transition name="bk">
        <div v-if="state.headerScroll" class="backgroundBox"></div>
      </Transition>
      <router-link tag="span" to="./category"><i class="nbicon nbmenu2"></i></router-link>
      <div class="header-search">
        <span class="app-name">新蜂商城</span>
        <i class="iconfont icon-search"></i>
        <router-link tag="span" class="search-title" to="./product-list?from=home">山河无恙，人间皆安</router-link>
      </div>
      <router-link class="login" tag="span" to="./login" v-if="!state.isLogin">登录</router-link>
      <router-link class="login" tag="span" to="./user" v-else>
        <van-icon name="manager-o" />
      </router-link>
    </header>
    <!-- 封装navbar-->
    <nav-bar></nav-Bar>
    <!-- 轮播图 -->
    <Swiper v-if="true" :height="200" :dataList="state.swiperList"></Swiper>
    <!-- 分类 -->
    <div class="category-list">
      <div v-for="item in state.categoryList" v-bind:key="item.categoryId" @click="tips">
        <img :src="item.imgUrl">
        <span>{{item.name}}</span>
      </div>
    </div>
    <!-- 新品上线 -->
    <div class="good" v-if="true">
      <header class="good-header">新品上线</header>
      <van-skeleton title :row="3" :loading="state.loading">
        <template #template>
            <div class="skeleton-template-item" v-for="item in 2" :key="item" >
              <van-skeleton-image />
              <van-skeleton-paragraph class="title-skeleton" />
              <van-skeleton-paragraph class="price-skeleton"  />
            </div>
        </template>
        <div class="good-box">
          <div class="good-item" v-for="item in state.newGoodses" :key="item.goodsId" @click="goToDetail(item)">
            <img :src="$filters.prefix(item.goodsCoverImg)" alt="">
            <div class="good-desc">
              <div class="title">{{ item.goodsName }}</div>
              <div class="price">¥ {{ item.sellingPrice }}</div>
            </div>
          </div>
        </div>
      </van-skeleton>
    </div>
      <!-- 热门商品 -->
    <div class="good" v-if="true">
      <header class="good-header">热门商品</header>
      <van-skeleton title :row="3" :loading="state.loading">
        <template #template>
            <div class="skeleton-template-item" v-for="item in 2" :key="item" >
              <van-skeleton-image />
              <van-skeleton-paragraph class="title-skeleton" />
              <van-skeleton-paragraph class="price-skeleton"  />
            </div>
        </template>
        <div class="good-box">
          <div class="good-item" v-for="item in state.hots" :key="item.goodsId" @click="goToDetail(item)">
            <img :src="$filters.prefix(item.goodsCoverImg)" alt="">
            <div class="good-desc">
              <div class="title">{{ item.goodsName }}</div>
              <div class="price">¥ {{ item.sellingPrice }}</div>
            </div>
          </div>
        </div>
      </van-skeleton>
    </div>
      <!-- 最新推荐 -->
    <div class="good" style="padding-bottom: 60px;" v-if="true">
      <header class="good-header">最新推荐</header>
      <van-skeleton title :row="3" :loading="state.loading">
        <template #template>
            <div class="skeleton-template-item" v-for="item in 2" :key="item" >
              <van-skeleton-image />
              <van-skeleton-paragraph class="title-skeleton" />
              <van-skeleton-paragraph class="price-skeleton"  />
            </div>
        </template>
        <div class="good-box">
          <div class="good-item" v-for="item in state.recommends" :key="item.goodsId" @click="goToDetail(item)">
            <img :src="$filters.prefix(item.goodsCoverImg)" alt="">
            <div class="good-desc">
              <div class="title">{{ item.goodsName }}</div>
              <div class="price">¥ {{ item.sellingPrice }}</div>
            </div>
          </div>
        </div>
      </van-skeleton>
    </div>
    <!-- van-tabbar 启用路由模式-->
    <van-tabbar v-if="false" route>
      <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="search" dot>分类</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="friends-o" :badge="count"  >购物车</van-tabbar-item>
      <van-tabbar-item to="/user" icon="setting-o" badge="20">我的</van-tabbar-item>
    </van-tabbar>
    
  </div>
</template>
<script setup>
  import Swiper from '@/components/Swiper.vue'
  import navBar from '@/components/NavBar.vue'
  import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted  } from 'vue'
  import { setLocal, getLocal } from '@/common/js/utils'
  import { getHome } from '@/service/home'
  import { showSuccessToast, showFailToast, showLoadingToast, closeToast } from 'vant'
  import { useRoute, useRouter } from 'vue-router'
  import { useCounterStore } from '@/stores/counter'
  import { useCartStore } from '@/stores/cart'
  import { storeToRefs } from 'pinia'

  // const couter = useCounterStore()
  // const {count,doubleCount} = storeToRefs(couter);
  const couter = useCartStore()
  const {count, updateCart} = storeToRefs(couter);

  const state = reactive({
    active:1,
    headerScroll:false, // header 是否透明
    isLogin:false,
    swiperList: [], // 轮播图列表
    newGoodses:[], // 新品上线
    hots:[], // 热门商品
    recommends:[], // 最新推荐
    categoryList: [ // 
      {
        name: '新蜂超市',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E8%B6%85%E5%B8%82%402x.png',
        categoryId: 100001
      }, {
        name: '新蜂服饰',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E6%9C%8D%E9%A5%B0%402x.png',
        categoryId: 100003
      }, {
        name: '全球购',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%A8%E7%90%83%E8%B4%AD%402x.png',
        categoryId: 100002
      }, {
        name: '新蜂生鲜',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E7%94%9F%E9%B2%9C%402x.png',
        categoryId: 100004
      }, {
        name: '新蜂到家',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%88%B0%E5%AE%B6%402x.png',
        categoryId: 100005
      }, {
        name: '充值缴费',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%85%E5%80%BC%402x.png',
        categoryId: 100006
      }, {
        name: '9.9元拼',
        imgUrl: 'https://s.yezgea02.com/1604041127880/9.9%402x.png',
        categoryId: 100007
      }, {
        name: '领劵',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E9%A2%86%E5%88%B8%402x.png',
        categoryId: 100008
      }, {
        name: '省钱',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E7%9C%81%E9%92%B1%402x.png',
        categoryId: 100009
      }, {
        name: '全部',
        imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%A8%E9%83%A8%402x.png',
        categoryId: 100010
      }
    ],
  })
  const router = useRouter();
  const route = useRoute();
  console.log('router...',router,route)

  onMounted(async()=>{
    const token = getLocal('token')
    if (token) {
      state.isLogin = true
      // 获取购物车数据.
      // cart.updateCart()
    }
    showLoadingToast({
      message: '加载中...',
      forbidClick: true
    });
    const { data } = await getHome()
    console.log(11111,data)
    state.swiperList = data.carousels
    state.newGoodses = data.newGoodses
    state.hots = data.hotGoodses
    state.recommends = data.recommendGoodses
    state.loading = false
    closeToast()
  })

  
  // 当首次渲染完毕开始监听scroll事件来监听设置header的透明度
  // vue3中nextTick可以在回调中触发,也可以返回一个promise 在后面处理相关事宜
  nextTick(() => {
    console.log('nextTick...')
    document.body.addEventListener('scroll',  onScrollFn)
  })
  onUnmounted(()=>{
    document.body.removeEventListener('scroll', onScrollFn)
  })
  // 在setup中存在变量提升???
  const onScrollFn = ()=>{
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    scrollTop > 100 ? state.headerScroll = true : state.headerScroll = false
  }

  const tips = (item)=>{
    console.log('tips...',item);
  }
  const goToDetail = (item)=>{
    console.log('goToDetail...',item);
    router.push({ path: `/product/${item.goodsId}` })
  }
  

</script>
<style lang="less" scoped>
  @import '../common/style/mixin';
  .home-header{
    .backgroundBox{
      width: 100%;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      background: #1baeae;
      z-index: -99999;
    }
    .bk-enter-active,
    .bk-leave-active {
      transition: opacity 1s ease;
    }

    .bk-enter-from,
    .bk-leave-to {
      opacity: 0;
    }
    &.active{
      // background: #1baeae;
    }
    position: fixed;
    top:0px;
    width: 100%;
    height:50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    z-index: 9999; 
    padding: 0px 10px;
    .nbmenu2 {
      color: @primary;
    }
    &.active {
      background: @primary;
      .nbmenu2 {
        color: #fff;
      }
      .login {
        color: #fff;
      }
    }
    .header-search{
      height: 40px;
      line-height: 40px;
      // width: 280px;
      width: 74%;
      padding: 2px 10px;
      border-radius: 20px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background: #fff;
      .app-name{
        color: green;
        font-size: 20px;
        font-weight: 700;
      }
      .iconfont{
        width: 1px;
        height: 24px;
        background: red;
      }
      .search-title{
        color: pink;
        font-size: 15px;
        font-weight: 300;
      }
    }
  }
  .category-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    div{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
      width: 20%;
      img{
        .wh(36px, 36px);
        margin: 13px auto 8px auto;
      }
      span{
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
      }
    }
  }

  .good{
    .good-header{
      text-align: center;
      background: #eee;
      line-height: 36px;
      font-size: 16px;
    }
    .van-skeleton{
      display: flex;
      justify-content: space-between;
      padding:10px;
      .skeleton-template-item{
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title-skeleton{
          width:calc(var(--van-skeleton-image-size) * 1.2) !important;
        }
        .price-skeleton{
          width:calc(var(--van-skeleton-image-size) / 2.5) !important;
        }
      }
    }
    .good-box{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .good-item{ 
        width: 50%;
        box-sizing: border-box;
        border-bottom: 1PX solid #e9e9e9;
        padding: 10px;
        &:nth-child(2n + 1) {
          border-right: 1PX solid #e9e9e9;
        }
        img{
          display: block;
          width: 120px;
          height: 110px;
          margin: 0 auto;
        }
        .good-desc{
          font-size: 14px;
          margin: 6px 0px;
          .title{
            font-size: 14px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            line-break: anywhere;
            -webkit-box-orient: vertical;
          }
          .price{
              text-align:center;
              font-size: 14px;
          }
        }
      }
    }
  }

  
</style>
